<template>
  <div>
    <van-nav-bar title="新增二级分类" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <span>一级分类</span>
        </div>
        <div class="van-cell__value" @click="showSheet = true">
          <div class="van-field__body" style="justify-content: flex-end;">
            <div class="van-field__control">{{level1Obj.label}}</div>
            <div class="van-field__right-icon"><i class="van-icon van-icon-arrow-down"></i></div>
          </div>
        </div>
      </div>
      <van-swipe-cell 
        v-for="(item, index) in level2list"
        :key="item.label + index"
        :right-width="60"
      >
        <van-cell :border="false" title="二级分类" :value="item.label" />
        <van-button square slot="right" type="danger" text="删除" @click="levelItemClick(item, index)" />
      </van-swipe-cell>
      <div class="button-wrap">
        <van-button type="primary" @click="showDialog = true;level2Name = ''">添加二级分类</van-button>
      </div>
    </van-cell-group>
    <van-dialog
      v-model="showDialog"
      title="添加二级分类"
      show-cancel-button
      @confirm="addLevel2"
    >
      <van-field
        v-model="level2Name"
        autofocus
        placeholder="请输入二级分类"
      />
    </van-dialog>
    <van-action-sheet
      v-model="showSheet"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>
<script>
import vanNavBar from "vant/lib/nav-bar";
import "vant/lib/nav-bar/style";
import vanCellGroup from "vant/lib/cell-group";
import "vant/lib/cell-group/style";
import vanField from "vant/lib/field";
import "vant/lib/field/style";
import vanActionSheet from "vant/lib/actionsheet";
import "vant/lib/actionsheet/style";
import vanButton from "vant/lib/button";
import "vant/lib/button/style";
import vanSwipeCell from "vant/lib/swipe-cell";
import "vant/lib/swipe-cell/style";
import vanCell from "vant/lib/cell";
import "vant/lib/cell/style";
import vanDialog from "vant/lib/dialog/Dialog";
import "vant/lib/dialog/style";

import { getLevel1List, getLevel2List, removeLevel2Item, addLevel2List } from "@/utils/storage.js"

export default {
  components: {
    vanNavBar, vanCellGroup, vanField, vanActionSheet, vanButton, vanSwipeCell, vanCell, vanDialog
  },
  data() {
    return {
      level1List: [],
      level1Index: 0,
      showSheet: false,
      actions: [],
      level2list: [],
      showDialog: false,
      level2Name: '',
    }
  },
  computed: {
    level1Obj() {
      return this.level1List[this.level1Index]
    },
  },
  created() {
    this.level1Index = parseInt(this.$route.params.i) || 0;
    this.level1List = getLevel1List();
    this.level2list = getLevel2List(this.level1List[this.level1Index].val);
    this.actions = this.level1List.map((t, i) => {
      return {
        ...t,
        i,
        name: t.label
      };
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect(obj) {
      this.showSheet = false;
      this.level1Index = obj.i;
      this.level2list = getLevel2List(obj.val);
    },
    levelItemClick(item, index) {
      this.$dialog.confirm({
        title: '删除确认',
        message: '是否确定删除该二级分类？'
      }).then(() => {
        removeLevel2Item(this.level1Obj, item, index);
        this.level2list = getLevel2List(this.level1Obj.val);
      }).catch(() => {});
    },
    addLevel2() {
      if (!this.level2Name.trim()) {
        this.$toast('二级分类不能为空');
        return;
      }
      if (this.level2list.some(t => t.label.trim() === this.level2Name.trim())) {
        this.$toast('不能添加重复的二级分类');
        return;
      }
      addLevel2List(this.level1Obj, {label: this.level2Name.trim()});
      this.level2list = getLevel2List(this.level1Obj.val);
      this.showDialog = false;
    }
  }
};
</script>
<style lang="less" scoped>
  .button-wrap{
    text-align: center;
    padding: 10px 0;
    .van-button{
      width: 90%;
      border-radius: 10px;
    }
  }
</style>
